<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
             <el-row style="margin-bottom:20px;">
                 <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">
                  <font color="#A1FEDB" size="4">综合分析</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item><font color="#A1FEDB"  size="4">综合能量分析</font></el-breadcrumb-item>
                
              </el-breadcrumb>
              </el-row>
              <el-row>
                  <el-tabs
              tab-position="top"
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane label="综合能量分析" name="first">
                <div id="allmap">
                  
                  <el-row>
                    <el-col :span="12">
                      <el-row>
                        <!-- <div class="newbutton" @click="handle_replace"></div> -->
                        <span
                          style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                          >供用能趋势</span
                        >
                      </el-row>
                      <el-row>
                        <div id="topology-canvas" class="full"></div>
                      </el-row>
                    </el-col>
                    <el-col :span="12">
                      <el-row>
                        <span
                          style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                          >能量信息统计</span
                        >
                      </el-row>
                      <el-row>
                        <div id="table4">
                          <el-row>
                            <el-col :span="12">
                              <el-row style="margin-top:10px;">
                                <center>
                                  <font color="white" size="3"
                                    >本日能量统计</font
                                  >
                                </center>
                              </el-row>
                              <el-row>
                                <el-form
                                  :model="formInline"
                                  :label-position="right"
                                  size="mini"
                                  style="margin-top:10px;margin-right:80px;"
                                >
                                  <el-form-item
                                    label="本日上网电量(KW)"
                                    label-width="180px"
                                  >
                                    <el-input
                                      class="input5"
                                      v-model="formInline.data1"
                                      placeholder=""
                                    ></el-input>
                                  </el-form-item>
                                  <el-form-item
                                    label="本日用网电量(KW)"
                                    label-width="180px"
                                  >
                                    <el-input
                                      class="input5"
                                      v-model="formInline.data2"
                                      placeholder=""
                                    ></el-input>
                                  </el-form-item>
                                  <el-form-item
                                    label="本日总发电量(KW)"
                                    label-width="180px"
                                  >
                                    <el-input
                                      class="input5"
                                      v-model="formInline.data3"
                                      placeholder=""
                                    ></el-input>
                                  </el-form-item>
                                  <el-form-item
                                    label="本日总负荷(KW)"
                                    label-width="180px"
                                  >
                                    <el-input
                                      class="input5"
                                      v-model="formInline.data4"
                                      placeholder=""
                                    ></el-input>
                                  </el-form-item>
                                  <el-form-item
                                    label="本日供热量(KW)"
                                    label-width="180px"
                                  >
                                    <el-input
                                      class="input5"
                                      v-model="formInline.data5"
                                      placeholder=""
                                    ></el-input>
                                  </el-form-item>
                                </el-form>
                              </el-row>
                            </el-col>
                            <el-col :span="12">
                              <el-row style="margin-top:10px;">
                                <center>
                                  <font color="white" size="3"
                                    >本月能量统计</font
                                  >
                                </center>
                              </el-row>
                              <el-row>
                                <el-form
                                  :model="formInline"
                                  :label-position="right"
                                  size="mini"
                                  style="margin-top:10px;margin-right:80px;"
                                >
                                  <el-form-item
                                    label="本月上网电量(KW)"
                                    label-width="180px"
                                  >
                                    <el-input
                                      v-model="formInline.data6"
                                      placeholder=""
                                    ></el-input>
                                  </el-form-item>
                                  <el-form-item
                                    label="本月用网电量(KW)"
                                    label-width="180px"
                                  >
                                    <el-input
                                      v-model="formInline.data7"
                                      placeholder=""
                                    ></el-input>
                                  </el-form-item>
                                  <el-form-item
                                    label="本月总发电量(KW)"
                                    label-width="180px"
                                  >
                                    <el-input
                                      v-model="formInline.data8"
                                      placeholder=""
                                    ></el-input>
                                  </el-form-item>
                                  <el-form-item
                                    label="本月总负荷(KW)"
                                    label-width="180px"
                                  >
                                    <el-input
                                      v-model="formInline.data9"
                                      placeholder=""
                                    ></el-input>
                                  </el-form-item>
                                  <el-form-item
                                    label="本月总供热量(KW)"
                                    label-width="180px"
                                  >
                                    <el-input
                                      v-model="formInline.data10"
                                      placeholder=""
                                    ></el-input>
                                  </el-form-item>
                                </el-form>
                              </el-row>
                            </el-col>
                          </el-row>
                        </div>
                      </el-row>
                    </el-col>
                  </el-row>
                  <el-row>
                    <div>
                      <el-row>
                        <el-col :span="12">
                          <el-row>
                            <span
                              style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                              >本日能量信息统计表</span
                            >
                          </el-row>
                          <div id="table1">
                            <el-table
                              :data="tableData1"
                              style="width: 100%;overflow:auto;"
                              :row-style="getRowClass"
                              :header-row-style="getRowClass"
                              :header-cell-style="getRowClass2"
                              @cell-mouse-enter="changerow"
                            >
                              <el-table-column prop="名称" label="名称">
                              </el-table-column>
                              <el-table-column prop="总量" label="总量(KWH)">
                              </el-table-column>
                              <el-table-column prop="环比" label="环比">
                              </el-table-column>
                              <el-table-column prop="同比" label="同比">
                              </el-table-column>
                            </el-table>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <el-row>
                            <span
                              style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                              >各主要设备能量展示</span
                            >
                          </el-row>
                          <div id="table3"></div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-row>
                </div>
              </el-tab-pane>
            </el-tabs>
              </el-row>
          
          </el-main>
        </el-container>
      </el-container>

      <!-- 表格显示区 -->

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import echarts from 'echarts'

import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu from '~/components/CanvasContextMenu'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      labelPosition: 'right',
      formInline: {
        data1: '',
        data2: '',
        data3: '',
        data4: '',
        data5: '',
        data6: '',
        data7: '',
        data8: '',
        data9: '',
        data10: ''
      },
      tableData: [
        {
          name1: '电灯',
          name2: '普通负荷',
          name3: '1',
          name4: '2',
          name5: '危险'
        },
        {
          name1: '空调',
          name2: '大功率负荷',
          name3: '6',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '工厂机床',
          name2: '大功率负荷',
          name3: '3',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '洗衣机',
          name2: '普通负荷',
          name3: '9',
          name4: '3',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        }
      ],
      tableData1: [],
      tableData3: [
        {
          name1: '燃气轮机',
          name2: '1',
          name3: '3',
          name4: '4',
          name5: '危险'
        },
        {
          name1: '柴油机',
          name2: '2',
          name3: '3',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '3',
          name3: '5',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '柴油机',
          name2: '4',
          name3: '8',
          name4: '3',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '5',
          name3: '9',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '0.0v',
          name3: '6',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '6',
          name3: '0',
          name4: '2',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '7',
          name3: '3',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '8',
          name3: '5',
          name4: '1',
          name5: '危险'
        }
      ],
      tableData4: [
        {
          name1: '燃气轮机',
          name2: '1',
          name3: '正在检修中',
          name4: '4',
          name5: '危险'
        },
        {
          name1: '柴油机',
          name2: '2',
          name3: '检修完成',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '3',
          name3: '未检修',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '柴油机',
          name2: '4',
          name3: '未检修',
          name4: '3',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '5',
          name3: '正在检修中',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '0.0',
          name3: '检修完成',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '6',
          name3: '检修完成',
          name4: '2',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '7',
          name3: '检修完成',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '8',
          name3: '检修完成',
          name4: '1',
          name5: '危险'
        }
      ],
      tableData5: [
        {
          name1: '储能系统',
          name2: '1',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '2',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '1',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '3',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '4',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '5',
          name3: '70%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '6',
          name3: '80%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '7',
          name3: '12%',
          name4: '危险',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '8',
          name3: '10%',
          name4: '危险',
          name5: '危险'
        }
      ],
      tableData6: [
        {
          name1: '主电源',
          name2: '1',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '2',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '1',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '3',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '4',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '5',
          name3: '70%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '6',
          name3: '80%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '7',
          name3: '12%',
          name4: '危险',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '8',
          name3: '10%',
          name4: '危险',
          name5: '危险'
        }
      ],

      canvas: {},
      canvasOptions: {
        rotateCursor: '/img/rotate.cur'
      },

      labelPosition: 'left',
      formLabelAlign: {
        name: '0.00w',
        region: '0.00kw',
        type: '0.00s',
        type2: '0.00s'
      },

      activeIndex: '3',

      activeName: 'first',
      activeName2: '1',

      scroll: true,
      onlinelist: [],
      list1: [],
      list: [],
      power1: '',
      power2: '',
      power3: '',
      power4: '',
      power5: '',
      power6: ''
    }
  },
  components: {
    Index,
    Bottom
  },
  computed: {},

  created() {},

  mounted() {
    //进入页面时加载的数据
    this.readdata()
    this.laterpowercurve()
    //
  },

  methods: {
    //获取页面所需数据
    readdata() {
      this.$axios({
        method: 'get',
        params: {
          // name: name,
          date: this.value2
        },
        url: 'http://127.0.0.1:8082/comprehensive/energyconsumption'
      }).then(res => {
        //供用能趋势
        this.power1 = res.data[0][0]
        this.power2 = res.data[0][1]
        this.power3 = res.data[0][2]
        this.power4 = res.data[0][3]
        //能量信息统计
        this.formInline.data1 = res.data[1][0]
        this.formInline.data2 = res.data[1][1]
        this.formInline.data3 = res.data[1][2]
        this.formInline.data4 = res.data[1][3]
        this.formInline.data6 = res.data[1][4]
        this.formInline.data7 = res.data[1][5]
        this.formInline.data8 = res.data[1][6]
        this.formInline.data9 = res.data[1][7]
        //本日能量信息统计
        this.tableData1 = res.data[2]
        //各主要设备能量展示
        this.power5 = res.data[3]
      })
    },
    //延迟执行函数
    laterpowercurve() {
      setTimeout(() => {
        this.showecharts()
      }, 30000)
    },
    //图表显示
    showecharts() {
      //供用能趋势
      let myChart1 = this.$echarts.init(
        document.getElementById('topology-canvas')
      )
      let option = {
        title: {
          text: '',
          textStyle: {
            fontWeight: 'normal', //标题颜色
            color: '#FFFFFF'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          textStyle: {
            fontWeight: 'normal', //标题颜色
            color: '#FFFFFF'
          },
          data: ['上网电量', '用网电量', '总发电量', '总负荷', '供热量']
        },

        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // name: '单位/天',
            boundaryGap: false,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: 1
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30(单位/天)'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量/KWH',
            nameTextStyle: {
              color: '#ffffff',
              fontSize: 15,
              padding: 2
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#fff',
                width: 1
              }
            }
          }
        ],
        series: [
          {
            name: '上网电量',
            type: 'line',
            smooth: true, //曲线平滑
            stack: '总量',
            itemStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#d7f4f8' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: '#eefcfd' // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ]), //背景渐变色
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 3,
                  type: 'solid',
                  color: '#4fd6d2'
                }
              },
              emphasis: {
                color: '#4fd6d2',
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 2,
                  type: 'dotted',
                  color: '#4fd6d2' //折线的颜色
                }
              }
            }, //线条样式
            symbolSize: 5, //折线点的大小

            areaStyle: {
              opacity: 0.3
              // color: '#fff'
            },
            data: this.power1
          },
          {
            name: '用网电量',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            areaStyle: {
              opacity: 0.3
            },
            data: this.power2
          },
          {
            name: '总发电量',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            areaStyle: {
              opacity: 0.3
            },
            data: this.power3
          },
          {
            name: '总负荷',
            type: 'line',
            stack: '总量',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            data: this.power4
          },
          {
            name: '供热量',
            type: 'line',
            stack: '总量3',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  //渐变色实现
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1, //变化度
                    //三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: '#3ebf9b'
                      },
                      {
                        offset: 0.5,
                        color: '#267268'
                      },
                      {
                        offset: 1,
                        color: '#14323f'
                      }
                    ]
                  )
                },
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            data: this.power5
          }
        ]
      }

      myChart1.setOption(option)
      //各主要设备能量展示
      let myChart3 = this.$echarts.init(document.getElementById('table3'))
      let option3 = {
        title: {
          text: '',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            fontWeight: 'normal', //标题颜色
            color: '#FFFFFF'
          },
          data: [
            '三联供发电量',
            '供热量',
            '光伏发电',
            '充电桩用电量',
            '直流配电室负荷量'
          ]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          name: 'KWH',
          boundaryGap: [0, 0.01],
          axisLine: {
            lineStyle: {
              color: 'white',
              width: 1 //这里是为了突出显示加上的
            }
          }
        },
        yAxis: {
          type: 'category',
          name: '设备类型',
          data: [
            '三联供发电量',
            '供热量',
            '光伏发电',
            '充电桩用电量',
            '直流配电室负荷量'
          ],
          axisLine: {
            lineStyle: {
              color: 'white',
              width: 1 //这里是为了突出显示加上的
            }
          }
        },
        series: [
          {
            name: '电量',
            type: 'bar',
            smooth: true, //曲线平滑
            itemStyle: {
              normal: {
                //渐变色实现
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //变化度
                  //三种由深及浅的颜色
                  [
                    {
                      offset: 0,
                      color: '#3ebf9b'
                    },
                    {
                      offset: 0.5,
                      color: '#267268'
                    },
                    {
                      offset: 1,
                      color: '#14323f'
                    }
                  ]
                ),
                lineStyle: {
                  //线的颜色
                  color: '#349e85'
                },
                //以及在折线图每个日期点顶端显示数字
                label: {
                  show: false,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            },
            // data: [130, 230, 100, 350, 450]
            data: this.power5
          }
        ]
      }
      myChart3.setOption(option3)
      window.addEventListener('resize', function() {
        myChart1.resize()
        myChart3.resize()
      })
    },
    openDetails(a, b) {
      this.$router.push({ path: '/healthdiagnosis/diagnosisdetails' })
    },
    async open() {
      if (!this.$route.query.id) {
        return
      }
      const data = await this.$axios.$get(
        '/api/topology/' + this.$route.query.id
      )
      if (data && data.id) {
        this.canvas.open(data.data)
      }
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#053030;color:#18EFF2;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#053030;color:#18EFF2;'
    },
    getRowClass3({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#F50C0C;'
      return 'background:#053030;color:#18EFF2;'
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },

    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    },

    handle_new(data) {
      this.canvas.open({ nodes: [], lines: [] })
    },

    handle_open(data) {
      this.handle_replace(data)
    },

    handle_replace(data) {
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = event => {
        const elem = event.srcElement || event.target
        if (elem.files && elem.files[0]) {
          const name = elem.files[0].name.replace('.json', '')
          const reader = new FileReader()
          reader.onload = e => {
            const text = e.target.result + ''
            try {
              const data = JSON.parse(text)
              if (
                data &&
                Array.isArray(data.nodes) &&
                Array.isArray(data.lines)
              ) {
                this.canvas.open(data)
              }
            } catch (e) {
              return false
            }
          }
          reader.readAsText(elem.files[0])
        }
      }
      input.click()
    },

    handle_save(data) {
      FileSaver.saveAs(
        new Blob([JSON.stringify(this.canvas.data)], {
          type: 'text/plain;charset=utf-8'
        }),
        // `le5le.topology.json`
        `11111.json`
      )
    },

    handle_savePng(data) {
      this.canvas.saveAsImage('le5le.topology.png')
    }
  }
}
</script>
<style lang="scss">
.el-tabs {
  width: 100%;
  color: white;
  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #e3e5ea;
  position: relative;
}
.el-table {
  background-color: #032121;
}
.input5 .el-input__inner {
  // width: 10rem;
  // height: 2rem;

  // border-radius: 4px;
  // border: 1px solid #b6d8f1;
  // color: #6a6f77;
  // outline: 0;
  // background-color: #062e2f;
}
</style>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#topology-canvas {
  width: 99%;
  height: 333px;
  background-image: url(../../assets/images/新UI16.png);
}
#table11 {
  width: 99%;
  height: 333px;
  background-image: url(../../assets/images/新UI16.png);
}
//控制画布的大小
.full {
  flex: 1;
  width: initial;
  position: relative;
  overflow: auto;
  background: #fff;
  // background-image: url("+require('../assets/images/timg.jpg')")
}

#table1 {
  width: 99%;
  height: 333px;
  overflow: auto;
  background-image: url(../../assets/images/新UI16.png);
}

#table2 {
  width: 95%;
  height: 389px;

  background-color: #005b5c;
  background-image: url(../../assets/images/新UI46.png);
}

#table3 {
  width: 95%;
  height: 333px;
  margin-left: 3rem;
  background-image: url(../../assets/images/新UI16.png);
}
#table4 {
  width: 100%;
  height: 333px;

  margin-left: 3rem;

  background-image: url(../../assets/images/新UI16.png);
}
#table12 {
  width: 100%;
  height: 333px;

  margin-left: 3rem;

  background-image: url(../../assets/images/新UI16.png);
}
#table13 {
  width: 99%;
  height: 333px;
  //
  background-image: url(../../assets/images/新UI16.png);
}
#table14 {
  width: 95%;
  height: 333px;
  margin-left: 3rem;
  background-image: url(../../assets/images/新UI16.png);
}
#allmap {
  // height: 600px;
  // color: white;
  margin-top: 20px;
}
.newbutton {
  width: 284px;
  height: 48px;
  background-image: url(../../assets/images/新UI43.png);
  // border-color: #041214;
  display: inline-block;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
